<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@include file="../common/rootPath.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- <script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script> -->
<script type="text/javascript" src="${ctx}/js/jquery-2.0.2.js"></script>
<script type="text/JavaScript" src="${ctx}/js/jquery.form.js"></script> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>html选择图片或拍照图片上传【支持单张上传】【或者多张上传，异步或者同步上传】</title>
</head>
<body>
    <form action="${ctx }/consultComment/upTest" method="POST" name="xiangmu" id="xiangmu"
        enctype="multipart/form-data">
        <table style="font-size: 50px;">
          <tr>
                <!--   <td>身份证图片上传：</td>
                <td><input type=file name="myfiles" id="doc"
                    onchange="showImage();">
                </td>-->
                <div id="localImag">
                    <!-- <img id="preview" width=-1 height=-1 style="diplay:none" /> -->
                </div>
            </tr> 
            <tr>
                <td>图片上传:</td>
                <!-- 为了实现张图片上传，上传框这个name要都一样 -->
                <td>
                <!-- 
                	<input style="font-size: 30px;" type="file" name="myfiles" id="doc1" onchange="showImage();" multiple accept="">
                 -->
                	<input type="file" name="myfiles" id="doc1" onchange="showImage();"  multiple="multiple" accept="image/*" capture="camera" size="30"> 
                
                </td>
                <td>                    
                </td>
            </tr>
            
             <!-- <tr>
                <td>图片上传2:</td>
                <td><input type="file" name="pic" id="pic" accept="image/*" class="upload-input" /></td>
                <td>                    
                </td>
            </tr> -->
            <tr>
                <td><input type="submit" style="font-size: 50px;" value="提交" />
                </td>
            </tr>
        </table>
    </form>
</body>


<script type="text/javascript">

	 function showImage() {
        var docObj = document.getElementById("doc1");
        var imgObjPreview = document.getElementById("preview");
        console.log("docObj.files:"+docObj.files[0]);
        console.log("docObj.files:"+docObj.files[1]);
        console.log("docObj.files:"+docObj.files.length)
        var $imgLength = $("#localImag").children().length;
        var $num = 3-$imgLength;
        if(docObj.files.length > 3 || $imgLength>=3 || (docObj.files.length+$imgLength)>3){
		    alert("最多只能选择三个图片,你还能上传"+ $num +"个图片")
		    return false;
		}	
        for(var i =0; i<docObj.files.length; i++){
        	if (docObj.files && docObj.files[i]) {
	            //火狐下，直接设img属性  
	            /* imgObjPreview.style.display = 'block';
	            imgObjPreview.style.width = '200px';
	            imgObjPreview.style.height = '120px';
	            //imgObjPreview.src = docObj.files[0].getAsDataURL();  
	            //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式  
	            imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); */
	            
	            var srcUrl = window.URL.createObjectURL(docObj.files[i]);
	            var html  = "<img src='"+srcUrl+"' style='height:200px;width100px;display:block;' />";
	            $("#localImag").append(html);
	            
	          //  $("#xiangmu").submit();
	        } else {
	            //IE下，使用滤镜  
	            docObj.select();
	            var imgSrc = document.selection.createRange().text;
	            var localImagId = document.getElementById("localImag");
	            //必须设置初始大小  
	            localImagId.style.width = "250px";
	            localImagId.style.height = "200px";
	            //图片异常的捕捉，防止用户修改后缀来伪造图片 
	            try {
	                localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
	                localImagId.filters
	                        .item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
	            } catch (e) {
	                alert("您上传的图片格式不正确，请重新选择!");
	                return false;
	            }
	            imgObjPreview.style.display = 'none';
	            document.selection.empty();
	        }
        }
        
           $("#xiangmu").ajaxSubmit({
			        type: 'post',
			        url: '${ctx}/consultComment/upTest',
			      /*   beforeSubmit: function () {
			            var file = $("#businessLicenseCopy").val();
			            var file2 = $("#registrationTaxCertificateCopy").val();
			            var file3 = $("#organizationCodeCertificateCopy").val();
			            var file4 = $("#qualificationCertificateCopy").val();
			            return true;
			        }, */
			        success:function(data,status){
						if("001" == data){
							alert("上传成功"+data)
						}else if("000" == data.code){
							$.messager.alert('系统异常提示:',data.msg,'error'); 
						}
					},
					error:function(xhr,status,e){
						$.messager.alert('异常提示:',e,'error'); 
					}
			    });
        
        
        return true;
    }

</script>

</html>